<template>
    <div class="params-info" v-if="Object.keys(paramsInfo).length !== 0">
          <div class="rule-key">
              <span>{{ paramsInfo.rule.key }}</span>
             </div>
          <div v-for="(tables, index) in paramsInfo.rule.tables" :key="index">
               <table class="info-table" v-for="(table, i) in tables" :key="i">
               <tr v-for="(tr, indey) in table" :key="indey">{{ tr }}</tr>
           </table>
          </div>
          
           <div class="info-key">
               <span>{{ paramsInfo.info.key }}</span>
               </div>
           <table class="info-param">
               <tr v-for="(info, i) in paramsInfo.info.set" :key="i">
                   <td class="info-param-key">{{ info.key }}</td>
                   <td class="param-value">{{ info.value }}</td>
               </tr>
           </table>

           <div class="info-img" v-if="paramsInfo.info.images">
                <img src="paramsInfo.info.images[0]" alt="">
           </div>
    </div>
</template>

<script>
export default {
    name: 'DetailParamsInfo',
    props: {
        paramsInfo: {
            type: Object,
            default() {
                return {}
            }
        }
    }
}
</script>

<style>
.params-info{
   padding: 50px 8px;
}
.params-info .rule-key,
.params-info .info-key{
    width: 100%;
    padding:  6px 0;
    line-height: 30px;
}
.params-info .rule-key span,
.params-info .info-key span{
    padding: 4px 6px;
    background-color: rgba(255, 0, 0, 0.2);
    color: rgba(255, 0, 0, 0.8);
    font-size: 15px;
    border-radius: 15px;
}
.params-info .info-table{
    display: flex;
    background-image: linear-gradient(90deg, #3333337d, #33333338); 
    text-align: center;
}
.params-info .info-table tr{
    flex: 1;
    border: 1px solid #33333338;
   padding: 5px 0;
   
}
.params-info .info-param {
    background-image: linear-gradient(90deg, #3333337d, #33333338); 
    width: 100%;
    height: auto; 
}
.params-info .info-param td{
    padding: 5px 6px;
    border: 1px solid #33333338;
}
/* .info-img{
    margin-bottom: 15px;
} */
</style>